<meta charset="UTF-8">
<table id="dg" class="easyui-datagrid" title="" style="height:auto"
		data-options="
			iconCls: 'icon-edit',
			singleSelect: true,
			toolbar: '#tb',
			url: 'orderItems.json',
			method: 'get',
			fitColumns:true,
			onClickRow: onClickRow">
	<thead>
		<tr>
			<th data-options="field:'id'">ID</th>
			<th data-options="field:'statusid',width:100,
					formatter:function(value,row){
						return row.statusname;
					},
					editor:{
						type:'combobox',
						options:{
							valueField:'statusid',
							textField:'statusname',
							url:'status.json'
						}
					}">Status</th>
			<th data-options="field:'reference',align:'left',editor:'textarea'">Referência</th>
			<th data-options="field:'description',width:100,align:'left',editor:'textarea'">Descrição</th>
			<th data-options="field:'sizes',align:'center',editor:'textarea'">Tamanhos</th>
			<th data-options="field:'colors',align:'center',editor:'textarea'">Cores</th>
			<th data-options="field:'arrows',align:'center',editor:'textarea'">Setas</th>
			<th data-options="field:'cylinders',align:'center',editor:'textarea'">Cilindros/Aviamentos</th>
			<th data-options="field:'translation',align:'center',editor:'textarea'">Tradução</th>
			<th data-options="field:'comments',editor:'textarea'">Observações</th>			
		</tr>
	</thead>
</table>

<div id="details" class="easyui-window" title="Detalhes do Item" data-options="modal:true,closed:true" style="width:800px;height:500px;padding:10px;"></div>
<div id="history" class="easyui-window" title="Histórico" data-options="modal:true,closed:true" style="width:800px;height:500px;padding:10px;">
	<div style="margin:5px">
		<a href="#" title="Voltar" onclick="closeHistory();"><i class="fa fa-mail-reply" style="font-size:18px;color:green;padding:5px;"></i>Voltar</a>
	</div>
	<br/>
	  
	<table id="dgHistory" class="easyui-datagrid" title=""
			data-options="rownumbers:true,singleSelect:true,url:'history.json',method:'get',pagination:true,fitColumns:true">
		<thead>
			<tr>
				<th data-options="field:'date',width:80">Data</th>
				<th data-options="field:'time',width:60">Hora</th>
				<th data-options="field:'user',width:70">Usuário</th>
				<th data-options="field:'field',width:70">Campo</th>
				<th data-options="field:'from',width:100">Alterado De</th>
				<th data-options="field:'to',width:100">Para</th>
			</tr>
		</thead>
	</table>
</div>


<div id="tb" style="height:auto">
	<a href="#" title="Novo" onclick="insert();"><i class="fa fa-plus" style="font-size:18px;color:green;padding:5px;"></i>Novo</a>
	<a href="#" title="Importar"><i class="fa fa-download" style="font-size:18px;color:green;padding:5px;"></i>Importar</a>
	<a href="#" title="Exportar"><i class="fa fa-file-excel-o" style="font-size:18px;color:green;padding:5px;"></i>Exportar</a>
	<a href="#" title="Histórico" onclick="history();"><i class="fa fa-history" style="font-size:18px;color:green;padding:5px;"></i>Histórico</a>
	<a href="#" title="Arquivos" onclick="explorer();"><i class="fa fa-folder-open" style="font-size:18px;color:green;padding:5px;"></i>Arquivos</a>
</div>

	<script type="text/javascript">
	
		$('#details').load('itemDetails.html');

		$(document).keypress(function(e) {
			if (e.which == 13){
				if (!e.shiftKey){
					accept();
				}
			}
		});

		$(document).keyup(function(e){
		    if(e.keyCode == 46){ 
		    	removeit();
		    }
		}) 

		var editIndex = undefined;

		function endEditing(){
			if (editIndex == undefined){return true}
			if ($('#dg').datagrid('validateRow', editIndex)){
				var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'statusid'});
				var statusname = $(ed.target).combobox('getText');
				$('#dg').datagrid('getRows')[editIndex]['statusname'] = statusname;
				$('#dg').datagrid('endEdit', editIndex);
				editIndex = undefined;
				return true;
			} else {
				return false;
			}
		}
		function onClickRow(index){
			if (editIndex != index){
				if (endEditing()){
					$('#dg').datagrid('selectRow', index)
							.datagrid('beginEdit', index);
					editIndex = index;
				} else {
					$('#dg').datagrid('selectRow', editIndex);
				}
			}
		}
		function insert(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				var index = $('#dg').datagrid('getRowIndex', row);
			} else {
				index = 0;
			}
			$('#dg').datagrid('insertRow', {
				index: index,
				row:{
				}
			});
			$('#tt').datagrid('selectRow',index);
			$('#tt').datagrid('beginEdit',index);
		}
		function removeit(){
			var row = $('#dg').datagrid('getSelected');
			var index = $('#dg').datagrid('getRowIndex', row);
			$('#dg').datagrid('cancelEdit', index)
					.datagrid('deleteRow', index);
			editIndex = undefined;
		}
		function accept(){
			if (endEditing()){
				$('#dg').datagrid('acceptChanges');
			}
		}
		function reject(){
			$('#dg').datagrid('rejectChanges');
			editIndex = undefined;
		}
		function details(){
			$('#details').window('open');
		}
		function history(){
			$('#history').window('open');
		}
		function closeHistory(){
			$('#history').window('close');
		}
	</script>
	